<template>
	<view class="search-page">
		<view class="search-bar">
			<input v-model="searchValue" type="text" placeholder="目的地/酒店/关键字" class="search-input"
				@input="handleInput" />
			<text class="cancel-btn" @click="cancelSearch">取消</text>
		</view>
		<view class="search-results" v-if="showResults">
			<view v-for="(item, index) in filteredResults" :key="index" class="result-item" @click="selectResult(item)">
				<text class="icon icon-jiudian" v-if="item.hotelId"></text>
				<text class="icon icon-dizhi" v-else></text>
				<view class="item-text">
					<view class="ellipsis-2 text-xs" v-html="ddStyleToChar(item.longName,searchValue,'color:#007AFF')"></view>
				</view>
				<text class="item-tag">{{ item.hotelId?'酒店':'地标' }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ddStyleToChar, formatDate } from '@/utils'
	import { getSearchData } from '@/api/home'
	import { ref } from 'vue'
	const searchValue = ref('')
	const filteredResults = ref([])
	const showResults = ref(false)
	const handleInput = async () => {
		if (searchValue.value.trim() === '') {
			showResults.value = false;
		} else {
			const res = await getSearchData({ keyword: searchValue.value })
			console.log(res)
			filteredResults.value = res.data
			showResults.value = true
		}
	}
	// 取消搜索
	const cancelSearch = () => {
		searchValue.value = '';
		showResults.value = false;
	}
	// 选择搜索结果项
	const selectResult = (item:any) => {
		// uni.showToast({
		// 	title: `选择了：${item.name}`,
		// 	icon: 'none'
		// })
		// if (item.hotelId) {
			// let CheckIn = formatDate(new Date(), 'YYYY-MM-DD')
			// let today = new Date(); // 设置日期为当前日期 + 1 天
			// let nextDay = new Date(today);
			// let CheckOut = formatDate(nextDay.setDate(today.getDate() + 1),'YYYY-MM-DD')
			// let params={
			// 	CheckIn,
			// 	CheckOut
			// }
			// uni.navigateTo({
			// 	url:`/pages/hotel/detail?id=${item.hotelId}&destinationId=${item.id}&params=${JSON.stringify(params)}`
			// })
		// }else{
			const Params = uni.getStorageSync('homeParams')
			uni.setStorageSync('homeParams', {
				...Params,
				destinationId: item.id,
				destinationsName:item.name
			})
			uni.switchTab({
				url: '/pages/home/index'
			})
		// }
	}
	
	
</script>

<style scoped>
	.search-page {
		padding: 10px 0;
	}

	.search-bar {
		display: flex;
		align-items: center;
		/* border-bottom: 1px solid #eee; */
		padding-bottom: 10px;
		position: relative;
		width: 100%;
	}

	.search-input {
		width: 100%;
		height: 65rpx;
		border: none;
		border-radius: 4px;
		padding: 0 80rpx 0 10rpx;
		background-color: #f5f5f5;
	}

	.cancel-btn {
		position: absolute;
		right: 10rpx;
		color: #555555;
		font-size: 30rpx;
	}
	.text-xs{
		font-size: 20rpx;
	}
	.search-results {
		margin-top: 10px;
		padding: 0 20rpx;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0px 2px 10rpx 0px #eee;
	}

	.result-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}

	.item-text {
		flex: 1;
		color: #333;
		font-size: 28rpx;
	}

	.icon {
		font-size: 28rpx;
		color: #333;
		padding-right: 10rpx;
	}

	.item-tag {
		color: #999;
		font-size: 24rpx;
	}
</style>